import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Son2 from "./son2";
function App() {
  const [msg, setMsg] = useState("hello");
  const [word, setWord] = useState("one word");
  const [arr, setArr] = useState([1, 2, 3]);
  useEffect(() => {
    console.log("useEffect");
    console.log(divRef, "divRef");
    // setMsg("hhhhhh ---nice day");
  }, []);
  //   useMemo((msg) => {
  //     console.log("useMemo");
  //   });
  let all = 0;
  function add() {
    console.log("add 被调用了");
    all = 0;
    arr.forEach((item) => {
      all += item;
    });
  }
  useCallback(add, []);
  useMemo(add, [arr]);
  const divRef = useRef();
  return (
    <div>
      App组件
      <div ref={divRef}>div1</div>
      <button onClick={() => setMsg("hello world")}>改变msg</button>
      <Son2 msg={msg}></Son2>
      <div style={{ background: "pink" }}>这是word{word}</div>
      <div>这是求和结果:{all}</div>
      <button
        onClick={() => {
          setArr([2, 3, 4, 5, 6]);
        }}
      >
        改变数组
      </button>
    </div>
  );
}

export default App;
